<template>
  <div ref="contextMenuRef">
    <slot></slot>
    <Teleport to="body">
      <div
        v-if="showMenu"
        class="context_menu"
        :style="{
          left: x + 'px',
          top: y + 'px'
        }"
      >
        <slot name="overlay"></slot>
      </div>
    </Teleport>
  </div>
</template>

<script setup lang="ts">
import useContextMenu from "@/hooks/useContextMenu";
import { ref } from "vue";
defineOptions({
  name: "ContextMenu"
});
const contextMenuRef = ref(null);
const { x, y, showMenu } = useContextMenu(contextMenuRef);
</script>
